<template>
	<view class="detail-container">
		<view class="banner">
			<van-image width="375" height="234" fit="cover" :src="image" />
			<!-- <image v-if="goodsDetail" :src="goodsDetail.icon" mode="center"></image> -->
			<!-- <image v-else src="../../static/icon/detail.png"></image> -->
		</view>
		<view class="info">
			<view class="info-name">{{goodsDetail.name}}</view>
			<view class="info-num">已兑换{{goodsDetail.hasExchanged}}件</view>
			<view class="score">{{goodsDetail.pointPrice}}积分</view>
			<view class="rule">规则介绍</view>
		</view>
		<!-- 规则 -->
		<view class="rule-info">
			<view class="top">
				<view class="title">使用规则</view>
				<view class="item">1.兑换：每位用户可兑换多次，换完即止。</view>
				<view class="item">2.使用：积分一经使用，不予退还。</view>
				<view class="item">3.领取：兑换完成后请尽快前往小区积分兑换处领取商品。</view>
			</view>
			<view class="center">
				<view class="title">产品说明</view>
				<view class="item">{{goodsDetail.desc}}</view>
			</view>
			<view class="bottom">
				<view class="title">温馨提示</view>
				<view class="item">数量有限，先到先得，兑完为止，积分一旦兑换不支持退还。</view>
			</view>
		</view>
		<!-- 兑换按钮 -->
		<view v-if="point.currentPoints >= goodsDetail.pointPrice && goodsDetail.remain !== 0" class="exchange" @click="exchangeGood">立即兑换</view>
		<view v-else-if="goodsDetail.remain == 0" class="no_enough">已兑完</view>
		<view v-else class="no_enough">积分不足</view>
		<!-- 遮罩层 -->
		<view class="dialog" @click="closeDialog" v-show="visible"></view>
		<view class="toast" v-show="visible" @click='closeDialog'>
			<view class="icon">
				<image src="../../static/icon/success.png"></image>
			</view>
			<view class="success">兑换成功</view>
			<view class="receive">请及时到积分兑换点领取商品</view>
		</view>
	</view>
</template>

<script>
	// import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				show: true,
				visible: false,
				id: null,
				params: {
					projId: null,
					pagination: {
						current: 1,
						pageSize: 10000
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params1: {
					projId: null,
					productId: null
				},
				goodsDetail: {},
				params2: {
					projId: null,
					residentId: null
				},
				point: {},
				image: ''
			}
		},
		onLoad(options){
			this.id = options.id
			this.getGoodsList()
			this.getPointAcount()
		},
		computed: {
			// ...mapState(['userInfo','tabCurrentIndex'])
			// enough() {
			// 	return this.point.currentPoints >= this.goodsDetail.pointPrice && this.goodsDetail.remain !== 0
			// }
		},
		methods: {
			// ...mapMutations(['setCurrentIndex']),
			// 获取商品信息
			getGoodsList() {
				uni.showLoading({mask: true})
				this.params.projId = uni.getStorageSync('userInfo').projId
				this.$http.post('wx/points/shop/list', this.params).then(res => {
					console.log(res,'商品列表')
					if (res.code === 10000) {
						this.goodList = res.data.list
						uni.hideLoading()
						this.goodList.some(item => {
							if(item.id == this.id){
								this.goodsDetail = item
								console.log(this.goodsDetail)
							}
						})
						this.downloadFile(this.goodsDetail.icon)
					}
				})
			},
			// 下载文件
			downloadFile(id) {
				this.$http.post('common/file/download', {
					id: id
				}).then(res => {
					console.log(res, '下载文件')
					if (res.code === 10000) {
						// this.tempPath = res.data.fileName
						this.goodsDetail.icon = res.data.fileData
						this.image = res.data.fileData
					}
				})
			},
			// 兑换商品
			exchangeGood() {
				uni.showLoading({mask: true})
				this.params1.projId = uni.getStorageSync('userInfo').projId
				this.params1.productId = parseInt(this.id)
				this.$http.post('wx/points/shop/exchange',this.params1).then(res => {
					console.log(res)
					if(res.code === 10000){
						uni.hideLoading()
						this.visible = true
						// this.setCurrentIndex(2)
						this.goodsDetail.remain--
						this.getPointAcount()
						setTimeout(() => {
							this.visible = false
						},1500)
						// setTimeout(() => {
						// 	uni.navigateTo({
						// 		url: '../pointShop/pointShop?index=?' + 1
						// 	})
						// })
						// uni.navigateTo({
						// 	url: '../pointShop/pointShop'
						// })
					}else if(res.code === 50011){
						uni.showToast({
							title: '兑换失败,该商品已兑完',
							icon: 'none'
						})
						this.getGoodsList()
					}else if(res.code === 50002){
						uni.showToast({
							title: '兑换失败,积分不足',
							icon: 'none'
						})
					}
				})
			},
			// 获取兑换记录
			closeDialog() {
				this.visible = false
			},
			// 积分查询
			getPointAcount() {
				this.$http.post('wx/points/account', {
					projId: uni.getStorageSync('userInfo').projId,
					residentId: uni.getStorageSync('userInfo').id
				}).then(res => {
					if (res.code === 10000) {
						// console.log(res, '积分')
						this.point = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		// height: 100%;
	}
	.detail-container {
		width: 100vw;
		padding-bottom: 200rpx;
		// height: 100vh;
		.banner {
			width: 750rpx;
			height: 468rpx;
			// height: 300rpx;
			margin-bottom: 18rpx;

			image {
				width: 100%;
				height: 100%;
				will-change: transform;
			}
		}
		.info {
			padding-left: 20rpx;
			margin-bottom: 20rpx;

			.info-name {
				font-family: Noto Sans S Chinese;
				font-weight: bold;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.info-num {
				color: #656565;
				font-size: 22rpx;
				margin-bottom: 6rpx;
			}
			.score {
				font-size: 30rpx;
				color: #FF6D45;
				margin-bottom: 40rpx;
			}
			.rule {
				color: #333;
				font-size: 28rpx;
			}
		}
		.rule-info {
			width: 710rpx;
			// height: 500rpx;
			margin-left: 20rpx;
			color: #333333;
			// background-color: pink;
			font-size: 24rpx;
			padding-top: 20rpx;
			padding-left: 20rpx;
			padding-bottom: 71rpx;
			box-shadow: 0px 1rpx 6rpx 0 #E9E9E9;
			// margin-bottom: 64rpx;
			.title {
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.top {
				margin-bottom: 30rpx;
			}

			.center {
				margin-bottom: 30rpx;
			}

			.bottom {
				margin-bottom: 30rpx;
			}

			.item {
				line-height: 36rpx;
			}
		}
		.exchange {
			width: 750rpx;
			height: 98rpx;
			color: #fff;
			position: fixed;
			bottom: 0;
			text-align: center;
			font-size: 32rpx;
			line-height: 98rpx;
			font-family: Noto Sans S Chinese;
			font-weight: bold;
			background-color: #42ADFF;
			// position: absolute;
			// bottom: 0;
			margin-top: 200rpx;
		}
		.no_enough {
			width: 750rpx;
			height: 98rpx;
			color: #fff;
			position: fixed;
			bottom: 0;
			text-align: center;
			font-size: 32rpx;
			line-height: 98rpx;
			font-family: Noto Sans S Chinese;
			font-weight: bold;
			background-color: #AAAAAA;
			// position: absolute;
			// bottom: 0;
			margin-top: 200rpx;
		}
		.dialog {
			width: 100%;
			height: 200%;
			background-color: #000;
			opacity: 0.39;
			position: absolute;
			left: 0;
			top: 0;
		}
		.toast {
			width: 476rpx;
			height: 310rpx;
			border-radius: 20rpx;
			position: absolute;
			left: 130rpx;
			top: 425rpx;
			color: #333;
			background-color: #fff;
			.icon {
				width: 82rpx;
				height: 82rpx;
				position: absolute;
				left: 197rpx;
				top: 61rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.success {
				font-size: 30rpx;
				position: absolute;
				left: 180rpx;
				top: 170rpx;
			}
			.receive {
				font-size: 24rpx;
				position: absolute;
				left: 83rpx;
				top: 216rpx;
			}
		}
	}
</style>

